<html>

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('button:first').click(function () {
                $('div.animation_dv').animate({ left: '300px' }, 2000, test)
            });
            $('button:eq(1)').click(function () {
                $('div.animation_dv').animate({ left: '300px' }, 2000, test).html('文字显示').css('fontSize','20px');
            });
        })
        function test() {
            alert('动画完成！');
        }
    </script>
    <style>
        .animation_dv {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: wheat;
            position: absolute;
        }
    </style>
</head>


<div>
    <button type="button">测试回调函数</button>
    <button type="button">测试链式编程</button>
    <div class="animation_dv"></div>
</div>

</html>